<template>
  <div id="cesiumContainer"></div>
</template>

<script setup>
import { onMounted } from 'vue'
import * as Cesium from 'cesium'

// 等组件挂载成功后实例
onMounted(async () => {
  const defaultAccessToken =
    'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIzZTU0NzgzYS0xNWNjLTRmZmEtOGQzMi1lY2JmM2IwNzUzMjIiLCJpZCI6MjUwMzcwLCJpYXQiOjE3Mjk3MzU0OTN9.ulTss00xhgzkk6fqIWqBvlIqfO3A0xMEtYUrST9zTL8'

  Cesium.Ion.defaultAccessToken = defaultAccessToken
  // 所有API的开始--控件
  const viewer = new Cesium.Viewer('cesiumContainer', {})
  // entity --矩形
  const rectangle = viewer.entities.add({
    // 实体中心点
    position: Cesium.Cartesian3.fromDegrees(118, 30),
    // 与此实体关联的框。
    rectangle: {
      // new Cesium.Rectangle ( west , south , east , north )
      // 最西端的经度，以弧度为单位，在 [-Pi, Pi] 范围内。[-180,180]
      // 最南端的纬度，以弧度为单位，范围为 [-Pi/2, Pi/2]。[-90,90]
      // 最东经度，以弧度为单位，在 [-Pi, Pi] 范围内。
      // 最北纬度，以弧度表示，范围为 [-Pi/2, Pi/2]。
      coordinates: Cesium.Rectangle.fromDegrees(120, 40, 123, 45),
      material: Cesium.Color.YELLOW,
      extrudedHeight: 2000,
    },
  })
  viewer.zoomTo(rectangle)
})
</script>



<style scoped>
#cesiumContainer {
  width: 100vw;
  height: 100vh;
}
:deep(.cesium-widget-credits) {
  display: none;
}
</style>
